<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="/static/css/index.css" rel="stylesheet">
<title>个人信息修改</title>
<style type=text/css>
.fileinput-button {
	position: relative;
	display: inline-block;
	overflow: hidden;
}

.fileinput-button input {
	position: absolute;
	left: 0px;
	top: 0px;
	opacity: 0;
	-ms-filter: 'alpha(opacity=0)';
}

.round_icon {
	width: 100px;
	height: 100px;
	display: flex;
	border-radius: 50%;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	margin-left: 50px;
}

.round_new_icon {
	width: 100px;
	height: 100px;
	display: flex;
	border-radius: 50%;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	margin-left: 50px;
}
</style>
<link rel="stylesheet"
	href="https://apps.bdimg.com/libs/jqueryui/1.10.4/css/jquery-ui.min.css">
<script src="https://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script
	src="https://apps.bdimg.com/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
</head>
<body>

	<div class="login pr f16">
		<div class="pa cont bgf" style="height: 600px;">
			<h2 class="pa title cf fn">个人信息修改</h2>
			<div class="fl left f14">
				<form action="/web/setpersonalDetails" method="post"
					id="regis" enctype="multipart/form-data">
					<div
						style="width: 100px; height: 100px; margin-left: 70px; margin-top: -30px;">
						<span class="fileinput-button" id="input"> <img
							th:src="@{'/img/'+${user.uImg}}" id="jpg" class="round_icon">
							<input type="file"
							style="width: 100px; height: 100px; margin-left: 50px;"
							id="imginput" name="uImg" accept=".jpg" />
						</span>
					</div>
					<div>
						<span style="margin-left: 50px;">点击上方图标选择人脸头像</span>
					</div>
					<div class="border input">
						<span style="width: 90px;">姓名</span> <input type="text"
							name="uName" placeholder="请输入姓名" id="uName" th:value="${user.uName}"/>
							<input type="hidden" name="uId" th:value="${user.uId}" />
					</div>
					<div class="border input" style="margin-top: -10px" id="updtel">
						<span style="width: 90px;">手机号码</span> <input type="text"
							name="uTel" style="width: 120px" id="tel" th:value="${user.uTel}" onclick="updTel();"/>
					</div>
					<div class="border input" style="margin-top: -10px;display: none;" id="codespan" >
						<span style="width: 90px;">手机验证码</span> <input id="code"
							type="text" placeholder="请输入验证码" style="width: 120px" />
						<button id="codebutt" type="button" onclick="getcode();"
							style="width: 70px; height: 37px; color: #F5F5F5">获取验证码</button>
					</div>
					<div class="mt20" style="margin-top: -1px">
				<button type="submit" class="cf f16 submit" style="margin-top: 5px">提交</button>
			</div>
			</div>
			
		</form>
		</div>
	</div>
	<p class="name pa cf">Copyright ©2019 深圳易威胜科技有限公司 All Rights
		Reserved</p>



	<script src="/static/js/jq-slideVerify.js" type="text/javascript"></script>
	<script type="text/javascript">
	$(function() {
		$("#imginput").change(function(e) {
			var imgBox = e.target;
			uploadImg($('#imginput'), imgBox)
		});
		var is;
		function uploadImg(element, tag) {
			var file = tag.files[0];
			var imgSrc;
			if (file.type != "image/jpeg") {

				alert("仅支持jpg格式文件，请重新选择！");
				is = false;
				return false;
			}
			var reader = new FileReader();
			reader.readAsDataURL(file);
			if (is != false) {
				reader.onload = function() {
					console.log(this.result);
					imgSrc = this.result;
					var imgs = document.createElement("img");
					$(imgs).attr("src", imgSrc);
					$(imgs).attr("class", "round_new_icon");
					$(imgs).attr("id", "jpg");
					$("#jpg").remove();
					$("#input").prepend(imgs);
				};
			}
		}
	});

	$.fn.validate = function(tips) {
		var is = false;
		if ($(this).val() == "" || $.trim($(this).val()).length == 0) {
			alert(tips + "不能为空！");
		} else {
			is = true;
		}
		return is;
	}
	var codenum;
	function getcode() {
		var tel = $("#tel").val();
		if (tel.length == 11) {
			$.ajax({
				url : "/web/verificationCode/" + tel,
				success : function(response) {
					console.log(response.data);
					if (response.success) {
						codenum = response.data;
						var code = $("#codebutt");
						code.attr("disabled", "disabled");
						setTimeout(function() {
							code.css("opacity", "0.8");
						});
						var time = 60;
						var set = setInterval(function() {
							code.html("(" + --time + ")秒后重新获取");
						}, 1000);
						setTimeout(function() {
							code.attr("disabled", false).html("重新获取验证码");
							clearInterval(set);
						}, 60000);

					} else {
						if (response.errCode == 001) {
							alert("手机号码已被注册");
						}
					}

				}
			});
		} else {
			alert("请输入正确的手机号码");
		}
		$("#code").blur('input propertychange', function() {
			var inputcode = $("#code").val();
			if (inputcode != codenum) {
				alert("验证码输入错误");
			}
		});
	}

	$('#regis').submit(
			function() {

				var result = false;
				if ($('#codespan').css('display') == "block") {
					if ($("#uName").validate("姓名") == true
							&& $("#tel").validate("手机号码") == true
							&& $("#code").val() == codenum) {
						result = true;
					}
					if (result == false) {
						return false;
					}
				} else {
					if ($("#uName").validate("姓名") == true
							&& $("#tel").validate("手机号码") == true) {
						result = true;
					}
					if (result == false) {
						return false;
					}
				}
			});
	function updTel() {
		$("#codespan").css("display", "block");
	}
	</script>
	<script src="/static/js/common.js" type="text/javascript"></script>
</body>
</html>